<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js grid component example</title>
    </head>

    <body>
      <div id='app'>
        {{user.first}}
        <hr>
        {{user.last}}
        <hr>
        {{user.fullName}}
        <hr>
        {{reverseaMesssage}}
      </div>
      <script src="../../dist/vue.js"></script>
      <script>
        const vm = new Vue({
          el: '#app',
          data:{
            arr:[1,2,3],
            message:'Hello word',
            user:{
              first:'liyufei',
              last:'22',
              fullName:''
            }
          },
          computed:{
            reverseaMesssage:function(){
              return this.message.split('').reverse().join()
            }
          },
          watch:{
            'user':{
              handler :function(newValue,oldValue){
                this.user.fullName = newValue.first + '-' + newValue.last
              },
              immediate:true,//立即执行
              deep:true //深度监听
            }
          }
        })

        // vm.$watch('user',
        //   function(newValue,oldValue){
        //     this.user.fullName = newValue.first + '-' + newValue.last
        //   },{
        //     immediate:true,//立即执行
        //     deep:true //深度监听
        //   }
        // )
      </script>
    </body>
    
  
</html>

   